<template>
    <view>
		<cu-custom :bgColor="globalData.bgColor" :isBack="true"><template #content><text class="text-darkgrey">{{$t('home.shop-home.o69xc4')}}</text></template></cu-custom>
        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
            <view >
                <view class="cu-list">
                    <view class="cu-item radius bg-white solid-top padding"  v-for="data in dataList" :key="data.id">
                        <view class="">
                            <view class="flex justify-between align-center">
                                <view class="padding-bottom-sm">
                                    <text class="text-darkgrey text-df cuIcon-titles">{{$t('groupon.grouponuser.4j58ty')}}</text>
									<text class="text-darkgrey text-df flex margin-left-sm">{{data.spuId}}</text>
                                </view>
                                <view v-if="data.status==0" class="text-xs cu-tag light round bg-orange">{{$t('groupon.grouponuser.835ygn')}}</view>
                                <view v-else-if="data.status==1" class="text-xs cu-tag light round bg-blue">{{$t('groupon.grouponuser.mql526')}}</view>
                                <view v-else-if="data.status==2" class="text-xs cu-tag light round bg-red">{{$t('bargain.bargainuser-detail.gdr44f')}}</view>
                            </view>
                            <view class="text-darkgrey padding-left-sm" ><text class="cu-tag bg-red radius sm margin-right-xs">{{data.grouponNum}}{{$t('groupon.grouponinfo.1xfh3n')}}</text> {{data.grouponId}}
                            </view>
                            <view class="cu-list menu-avatar flex justify-between padding margin-top-sm">
                                <view class="cu-avatar round lg" :style="{'background-image':data.headimgUrl?'url('+data.headimgUrl+')':''}">
                                    <view class="cu-tag badge bg-red">{{$t('groupon.grouponuser.h4n5lw')}}</view>
                                </view>
                                <view v-for="dataItem in data.listGrouponUser" :key="dataItem.id" class="cu-avatar round lg" v-if="dataItem.id != data.id"
                                      :style="{'background-image':dataItem.headimgUrl?'url('+dataItem.headimgUrl+')':''}">
                                </view>
                                <view v-for="(item, index) in (data.grouponNum - data.listGrouponUser.length)" :key="item.id" class="cu-avatar round lg cuIcon-peoplefill">
                                </view>
                            </view>
							<view class="padding-left">
								<view class="text-purple-grey text-sm" >{{$t('groupon.grouponuser.5xinj8')}}{{data.grouponPrice}}</view>
								<view class="text-purple-grey text-sm" >{{$t('groupon.grouponinfo.7qgd10')}}{{data.validBeginTime}}{{' - '}}{{data.validEndTime}}</view>
								<view class="text-purple-grey text-sm" >{{$t('groupon.grouponinfo.86h9t6')}}{{data.grouponNum}}</view>
								<view class="text-purple-grey text-sm text-right">{{data.createTime}}</view>
							</view>
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-body>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

    
    import {getPage, getObj, addObj, putObj, delObj} from '@/api/mall/grouponuser'

    export default {
        mixins: [MescrollMixin], // 使用mixin
        components: {},
        data() {
            return {
                globalData: getApp().globalData,
                CustomBar: this.CustomBar,
                inputKey:'',
                mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
                downOption: {// 下拉刷新的配置(可选, 绝大部分情况无需配置)

                },
                // 上拉加载的配置(可选, 绝大部分情况无需配置)
                upOption: {
                    page: {
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        tip: this.$t('bargain.bargaininfo.m3k7oc')
                    }
                },
                // 列表数据
                dataList: []
            }
        },
        methods: {
            changeEnable(row){
                let content = this.$t('bargain.bargaininfo.w3g127');
                let enable = 1;
                if(row.enable==1){
                    enable = 0;
                    content = this.$t('bargain.bargaininfo.9di20a');
                }
                let that = this;
                uni.showModal({
                    title: this.$t('bargain.bargaininfo.b8740a'),
                    content: content,
                    success: (res) => {
                        if (res.confirm) {
                            putObj({
                                id: row.id,
                                enable: enable
                            }).then(data => {
                                uni.showToast({title:this.$t('bargain.bargaininfo.f46253')})
                                that.mescroll.resetUpScroll();
                            });
                        } else if (res.cancel) {}
                    }
                });

            },
            search (val) {
                this.mescroll.resetUpScroll();
            },
            /*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            /*下拉刷新的回调, 有三种处理方式:*/
            downCallback(){
                this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
                this.mescroll.endSuccess()
            },
            /*上拉加载的回调*/
            upCallback(page) {
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                let querySearch = '?current='+pageNum+'&size='+pageSize+'&descs=create_time';
                if(this.inputKey){
                    querySearch = querySearch + '&name='+this.inputKey
                }
                getPage(querySearch).then(response=>{
                    if(response.data){
                        // 接口返回的当前页数据列表 (数组)
                        let curPageData = response.data.records;
                        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                        let curPageLen = curPageData.length;
                        // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                        let totalSize = response.data.total;
                        //设置列表数据
                        if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
                        this.dataList = this.dataList.concat(curPageData); //追加新数据
                        // 请求成功,隐藏加载状态
                        this.mescroll.endBySize(curPageLen, totalSize);
                        setTimeout(()=>{
                            this.mescroll.endSuccess(curPageLen)
                        },20)

                    }
                });
            }
        }
    }
</script>

<style>
</style>
